<template>
	<scroll-view scroll-y class="scroll_view">
		<uv-swiper :list="swiper" keyName="img" radius="0" height="300" imgMode="scaleToFill"></uv-swiper>
		<view class="content">
			<view class="info_view">
				<view class="left_box">
					<view class="name">{{data_info.name}}</view>
					<view class="star">
						<uv-rate allowHalf :value="data_info.score"></uv-rate>
						<view class="value">评分 {{data_info.score}}分</view>
					</view>
				</view>
				<view class="btn_view">
					<view class="btn" @click.stop="oper">
						<image src="@/static/images/shop2.png" v-if="follow==1"></image>
						<image src="@/static/images/shop1.png" v-else></image>
						<view>收藏</view>
					</view>
					<view class="btn" @click="backRouter">
						<image src="@/static/images/shop3.png"></image>
						<view>返回</view>
					</view>
				</view>
			</view>
			<view class="trade">
				<view class="label">营业时间</view>
				<view class="time">{{data_info.trade}}</view>
			</view>
			<view class="link">
				<view class="link_view">
					<image src="@/static/images/address.png"></image>
					<view>{{data_info.address}}</view>
				</view>
				<view class="btn_view">
					<view class="btn_cell" @click="openLocation">
						<image src="@/static/images/shop4.png"></image>
						<view>导航</view>
					</view>
					<view class="btn_cell" @click="phoneCall">
						<image src="@/static/images/shop5.png"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
			<view class="title">推广区商品</view>
			<view class="list">
				<view class="item" v-for="item in list" @click.stop="router(`/pages/club/club_deta_buy?id=${item.id}`)">
					<image :src="item.product.img" class="cover"></image>
					<view class="item_view">
						<view class="deta">
							<view class="name">{{item.product.name}}</view>
							<view class="label_view">
								<view class="label">{{item.product.synopsis}}</view>
							</view>
						</view>
						<view class="oper">
							<view class="price">
								<view class="now_price">￥{{item.price}}</view>
								<!-- <view class="integral">赠送<text>{{item.buy_integral}}</text>积分</view> -->
								<view class="integral">赠送<text>{{item.self_integral}}</text>积分</view>
								<!-- <view class="before_price">￥{{item.product.price}}</view> -->
							</view>
							<view class="btn_view">
								<view @click.stop="router(`/pages/club/club_confirm_order?id=${item.id}`)">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		storeInfo,
		storeFollow
	} from "@/request/api";
	import {
		ref
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useWechat from "@/hooks/useWechat.js";
	const {
		router
	} = useBase();
	const {
		wxOpenLocation
	} = useWechat();
	const props = defineProps({
		id: [String, Number]
	});

	const swiper = ref([]);
	const data_info = ref({});
	const list = ref([]);

	const follow = ref(0);
	const getDeta = async () => {
		let {
			info,
			underwrite,
			is_follow
		} = await storeInfo({
			id: props.id
		});
		swiper.value = info.imgs;
		data_info.value = info;
		list.value = underwrite;
		follow.value = is_follow;
	};
	getDeta();

	const oper = async () => {
		await storeFollow({
			id: props.id
		});
		uni.$uv.toast("操作成功");
		getDeta();
	};

	const backRouter = () => uni.navigateBack();

	const openLocation = () => wxOpenLocation(data_info.value);
	const phoneCall = () => {
		uni.makePhoneCall({
			phoneNumber: data_info.value.phone
		});
	};
</script>

<style scoped lang="scss">
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;

		.info_view {
			padding: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left_box {
				flex: 1;
				overflow: hidden;

				.name {
					color: #212121;
					font-size: 36rpx;
					font-weight: bold;
					padding-bottom: 30rpx;
					box-sizing: border-box;
				}

				.star {
					display: flex;
					align-items: center;

					.value {
						color: #525252;
						font-size: 24rpx;
					}
				}
			}

			.btn_view {
				display: flex;

				.btn {
					margin-left: 60rpx;

					&:first-child {
						margin-left: 0;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}

					view {
						color: #333333;
						font-size: 20rpx;
						padding-top: 10rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.trade {
			border-top: 1px solid #EEEEEE;
			border-bottom: 1px solid #EEEEEE;
			padding: 24rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.label {
				width: 120rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #CA1C1D;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 5rpx;
				background: rgba(202, 28, 29, 0.1);
			}

			.time {
				color: #212121;
				font-size: 28rpx;
				font-weight: bold;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}

		.link {
			border-bottom: 1px solid #EEEEEE;
			box-sizing: border-box;
			padding: 24rpx 0 24rpx 12rpx;
			box-sizing: border-box;
			display: flex;

			.link_view {
				flex: 1;
				display: flex;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				view {
					flex: 1;
					line-height: 28rpx;
					color: #333333;
					font-size: 28rpx;
					padding-left: 10rpx;
					box-sizing: border-box;
				}
			}

			.btn_view {
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;

				.btn_cell {
					&:first-child {
						padding-right: 50rpx;
						box-sizing: border-box;
						position: relative;

						&::after {
							content: "";
							width: 1px;
							height: 30rpx;
							background: #EEEEEE;
							position: absolute;
							right: 0;
							top: 24rpx;
							z-index: 2;
						}
					}

					&:last-child {
						padding-left: 50rpx;
						box-sizing: border-box;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}

					view {
						color: #333333;
						font-size: 20rpx;
						font-weight: 400;
					}
				}
			}
		}

		.title {
			color: #333333;
			padding: 32rpx 0 18rpx 21rpx;
			box-sizing: border-box;
			position: relative;

			&::after {
				content: "";
				width: 10rpx;
				height: 30rpx;
				background-color: #CA1C1D;
				position: absolute;
				left: 0;
				top: 32rpx;
				z-index: 2;
			}
		}

		.list {
			.item {
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;

				.cover {
					width: 200rpx;
					height: 200rpx;
				}

				.item_view {
					flex: 1;
					padding-top: 20rpx;
					padding-left: 30rpx;
					box-sizing: border-box;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.deta {
						.name {
							color: #333333;
							font-size: 32rpx;
							font-weight: bold;
							padding-bottom: 16rpx;
							box-sizing: border-box;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.label_view {
							display: flex;

							.label {
								height: 32rpx;
								line-height: 32rpx;
								color: #999999;
								font-size: 18rpx;
								border-radius: 16rpx;
								background: #EEEEEE;
								padding: 0 16rpx;
								box-sizing: border-box;
							}
						}
					}

					.oper {
						padding-bottom: 4rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							.now_price {
								color: #CA1C1D;
								font-size: 24rpx;
								font-weight: bold;
							}

							.before_price {
								color: #999999;
								font-size: 20rpx;
								text-decoration: line-through;
								padding-top: 20rpx;
								box-sizing: border-box;
							}
						}

						.integral {
							display: flex;
							align-items: center;
							color: #CA1C1D;
							font-size: 20rpx;

							text {
								font-size: 22rpx;
							}
						}

						.btn_view {
							display: flex;
							align-items: flex-end;

							view {
								width: 150rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 24rpx;
								border-radius: 6rpx;
								background: #CA1C1D;
							}
						}
					}
				}
			}
		}
	}
</style>